import React, { useState, useEffect } from 'react'
import './Explore.css'
import { useNavigate } from 'react-router-dom'
import { Carousel } from 'antd';
import { SoundOutlined, HarmonyOSOutlined, MoonOutlined, CrownOutlined } from '@ant-design/icons';

export default function Explore() {
  const navigate = useNavigate()
  useEffect(() => {
    0
  }, [])
  const [list, setList] = useState([
    { id: 1, name: '', img: '', plus: false },
  ])
  const imgs = [
    { path: "/explore/1.png" },
    { path: "/explore/2.png" },
    { path: "/explore/3.png" },
    { path: "/explore/4.png" }
  ]
  const tits = [
    { name: '声音', path: '/box/sound', img: <SoundOutlined />, color: '#78BE86' },
    { name: '冥想', path: '/box/meditate', img: <HarmonyOSOutlined />, color: "#FEC3AD" },
    { name: '睡眠', path: '/box/sleep', img: <MoonOutlined />, color: '#764DFC' },
    { name: 'PLUS', path: '/box/plus', img: <CrownOutlined />, color: '#D3AB2E' }
  ]
  const sound = [
    { id: 1, name: '雨天', color: '#F8F0EE', img: 'https://i04piccdn.sogoucdn.com/e264088d98a5b520', audio: '/public/sound/雨.mp4' },
    { id: 2, name: '雷雨', color: '#F2F6F9', img: 'https://i02piccdn.sogoucdn.com/eba1c01c8940f9bd', audio: '/public/sound/雷雨.mp4' },
    { id: 3, name: '篝火', color: '#EBEBEB', img: 'https://i01piccdn.sogoucdn.com/ce97c4bd0ba0cb19', audio: '/public/sound/篝火.mp4' }
  ]
  const meditate = [
    { name: '假期后-限免', img: '/public/meditate/1.png' },
    { name: '品茶-限免', img: '/public/meditate/2.png' },
    { name: '宙宇静坐', img: '/public/meditate/3.png' },
    { name: '敷面膜', img: '/public/meditate/4.png' },
    { name: '太空漫步', img: '/public/meditate/5.png' },
    { name: '提升专注', img: '/public/meditate/6.png' },
    { name: '倾听', img: '/public/meditate/7.png' },
    { name: '腿部放松', img: '/public/meditate/8.png' }
  ]
  const sleep = [
    { name: '美好梦境-限免', img: '/public/sleep/1.png' },
    { name: '舒眠', img: '/public/sleep/2.png' },
    { name: '美好梦境', img: '/public/sleep/3.png' },
    { name: '晚安', img: '/public/sleep/4.png' }
  ]
  const change = (i) => {
    let audio = document.querySelector('audio')
    audio.src = i
    // console.log(audio);
    audio.play()
    setTimeout(() => {
      audio.pause()
    }, 10000)
  }

  return (
    <div className='box'>
      <h1>探索</h1>
      <p>和潮汐一起平静身心</p>
      <Carousel autoplay dots={false} style={{
        margin: '1rem 0'
      }}>
        {imgs.map((i, ind) => {
          return <div key={i}>
            <h3 style={{
              height: '16rem',
              border: 'none',
              borderRadius: '1rem',
              lineHeight: '16rem',
              textAlign: 'center',
              backgroundImage: "url(" + i.path + ")",
              backgroundSize: '100%',
              backgroundRepeat: 'no-repeat'
            }}>
            </h3>
          </div>
        })}
      </Carousel>
      <div style={{
        display: 'flex',
        justifyContent: 'space-around'
      }}>
        {tits.map((i, ind) => {
          return <dl key={i.name}>
            <dt style={{
              textAlign: 'center',
              fontSize: '1rem',
              margin: '0.5rem 0',
              backgroundColor: '#EEFDF2',
              borderRadius: '50%',
              width: '3rem',
              height: "3rem",
              fontSize: '1.5rem',
              lineHeight: '3rem',
              textAlign: 'center',
              color: i.color
            }} onClick={() => {
              navigate(i.path)
            }}>
              {i.img}
            </dt>
            <dd>{i.name}</dd>
          </dl>
        })}
      </div>
      <div style={{
        width: '100%',
        padding: '1rem 0',
        margin: '1rem 0',
      }}>
        <audio id='audio' src='' loop />
        <h2>
          声音场景
          <span style={{
            float: 'right',
            color: 'red'
          }} onClick={() => {
            navigate('/box/sound')
          }}>更多</span>
        </h2>
        <div style={{
          display: 'flex',
          justifyContent: 'space-around',
          margin: '1rem 0'
        }}>
          {sound.map((i, ind) => {
            return <dt key={i.id} style={{
              display: 'inline-block',
              width: '100px',
              padding: '1rem 0',
              textAlign: 'center',
              borderRadius: '1rem',
              backgroundColor: i.color
            }} onClick={() => {
              change(i.audio)
            }}>
              <dd>
                <img src={i.img} style={{
                  width: '4rem',
                  height: '4rem',
                  borderRadius: '50%',
                  margin: '1rem 0'
                }}></img>
              </dd>
              <dt>{i.name}</dt>
            </dt>
          })}
        </div>
      </div>
      <h2 style={{
        marginTop: '1rem'
      }}>
        时刻
        <span style={{
          float: 'right',
          color: 'red',
          fontSize: '1rem'
        }}>更多</span>
      </h2>
      <div style={{
        width: '100%',
        display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'space-between'
      }}>
        {meditate.map((i, ind) => {
          return <dl key={i} style={{
            display: 'inline-block',
            width: '44%',
            borderRadius: '1rem',
            margin: '1rem 0',
            padding: '1rem 0'
          }}>
            <dd style={{
              display: 'inline-block',
              width: '100%',
              height: "6rem",
              borderRadius: '1rem',
            }}>
              <img src={i.img} />
            </dd>
            <dt>
              <h4>{i.name}</h4>
            </dt>
          </dl>
        })}
      </div>

      <h2 style={{
        margin: '1rem 0'
      }}>
        睡前
        <span style={{
          float: 'right',
          color: 'red',
          fontSize: '1rem',
        }}>更多</span>
      </h2>
      <div style={{
        width: '100%',
        display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'space-between'
      }}>
        {sleep.map((i, ind) => {
          return <dl key={i} style={{
            display: 'inline-block',
            width: '44%',
            borderRadius: '1rem',
            margin: '1rem 0',
            padding: '1rem 0'
          }}>
            <dd style={{
              display: 'inline-block',
              width: '100%',
              height: "6rem",
              borderRadius: '1rem',
            }}>
              <img src={i.img} />
            </dd>
            <dt>
              <h4>{i.name}</h4>
            </dt>
          </dl>
        })}
      </div>


    </div>
  )
}